<template>
  <div class="xiaoshou">
    <div style="background: #ccc"><h1 @click="chaxun()">查询</h1></div>
    <div class="chaxun">
      <div>搜索：<input type="text" placeholder="输入菜品名称" /></div>
      <div>
        时间：<input type="text" placeholder="xxxx-xx-xx" /> 至
        <input
          type="text"
          placeholder="xxxx-xx-xx"
        />&emsp;&emsp;菜品类别：<input type="text" />
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="xuhao" label="序号" width="150" height="30">
      </el-table-column>
      <el-table-column prop="cpname" label="菜品名称" width="120">
      </el-table-column>
      <el-table-column prop="cpid" label="菜品编码" width="120">
      </el-table-column>
      <el-table-column prop="cpleibie" label="菜品类别" width="120">
      </el-table-column>
      <el-table-column prop="danwei" label="菜品单位" width="300">
      </el-table-column>
      <el-table-column prop="price" label="单价" width="200"> </el-table-column>
      <el-table-column prop="number" label="销售量" width="200">
      </el-table-column>
      <el-table-column prop="sum" label="金额" width="200"> </el-table-column>
      <!-- <el-table-column prop="zip" label="操作" width="150"> -->
      <!-- <template>
          <el-button @click="handleClick()" type="text" size="small"
            >查看订单</el-button
          >
          <el-button @click="del()" type="text" size="small">删除</el-button>
        </template> -->
      <!-- </el-table-column> -->
    </el-table>

    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="500">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(333);
    },
    del() {
      console.log(444);
    },
    chaxun() {},
  },
  data() {
    return {
      tableData: [
        {
          xuhao: "01",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "02",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "03",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "04",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "05",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "06",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "07",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "08",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "09",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
        {
          xuhao: "10",
          cpname: "农家小炒肉",
          cpid: "CP215224332",
          cpleibie: "炒菜",
          danwei: "盘",
          price: "50",
          number: "12.50",
          zhuohao: 100,
          sum: "1000",
        },
      ],
    };
  },
};
</script>

<style scoped>
.chaxun {
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: #fff;
}
.chaxun div {
  margin-left: 50px;
}
.fenye {
  margin: 10px 0px;
}
</style>